<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@	page import="java.util.*" %>     
<%@ page import="com.gpstracking.BL.AreaBL " %>   
<%@ page import="com.gpstracking.BE.Area" %>
<%@ page import="com.gpstracking.BE.Usuario" %>
<%@ page import="com.gpstracking.BL.RutaBL " %>   
<%@ page import="com.gpstracking.BE.Ruta" %>
    
<%@ page import="com.gpstracking.BL.CondicionBL " %>   
<%@ page import="com.gpstracking.BE.Condicion" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 

	<head>
		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
		<meta charset="UTF-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="author" content="" />
		
		  <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      
    </style>
  
      <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    
    <script type="text/javascript" src="./js/ajaxCom.js"></script>
   
		
		<!--========= STYLES =========-->
		<link rel="stylesheet" href="../css/reset.css" />
		<link rel="stylesheet" href="../css/grid.css" />
		<link rel="stylesheet" href="../css/uniform.default.css" />
		<link rel="stylesheet" href="../css/chosen.css" />
		<link rel="stylesheet" href="../plugins/jqueryui/all/themes/base/jquery.ui.all.css" />
		<link rel="stylesheet" href="../plugins/alerts/resources/css/jquery.toastmessage.css" />
		<link rel="stylesheet" href="../plugins/datatables/media/css/demo_page.css" />
		<link rel="stylesheet" href="../plugins/datatables/media/css/demo_table_jui.css" />
		
		<link rel="stylesheet" href="../css/style.css" />
		<link rel="stylesheet" href="../css/config.css" />
		<!--[if gte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
		
		<!--============ JQUERY =============-->
		<script src="../js/jquery.js" type="text/javascript"></script>
		<script src="../js/jquery.uniform.js" type="text/javascript"></script>
		<script src="../js/chosen.jquery.js" type="text/javascript"></script>
		<script src="../js/jquery.placeholder.js" type="text/javascript"></script>
		<script src="../plugins/jqueryui/all/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
		<script src="../plugins/alerts/javascript/jquery.toastmessage.js" type="text/javascript"></script>
		<script src="../js/scriptbreaker-multiple-accordion-1.js" type="text/javascript" ></script>
		<script src="../plugins/datatables/media/js/jquery.dataTables.js" type="text/javascript"></script>
		<script src="../js/head_scripts.js" type="text/javascript"></script>
		
		<script src="../js/controller/condiciones.js" type="text/javascript"></script>

			
						
		<!--=== ENABLE HTML5 TAGS FOR IE ===-->
		<!--[if IE]><script src="js/html5.js"></script><![endif]-->
		
		<title>GPS Tracking</title>
	</head>
<% 
	
		Usuario user = (Usuario)session.getAttribute("user");
	
		AreaBL areaController = new AreaBL();
		List<Area> areasActivas = areaController.listarAreas(user);

		RutaBL rutaController = new RutaBL();
		List<Ruta> rutasActivas = rutaController.listarRutas(user);

		CondicionBL condicionController = new CondicionBL();
		List<Condicion> condicionesActivas = condicionController.getCondicionesActivas(user);
	
	 %>
	<body onload="initialize()">
		<jsp:include page="../static/sidebar.jsp" />
		
		
		<section class="container">
			
			
			
			<section class="container_12">
				<section id="page_content" class="page_content">
					<jsp:include page="../static/toppanel.jsp" />				
					
					
					
					<div class="grid_12">
						<div class="box">
							<h2>
								Condiciones
								<span class="l"></span><span class="r"></span>
							</h2>
							<div class="block">
								<div class="block_in">
									<!-- BEGIN TABLE -->
									<table class="display basictable">
										<thead>
											<tr>
												<th>Codigo</th>
												<th>Nombre</th>
												<th>Descripción</th>
												<th>Detalle</th>
											</tr>
										</thead>
										<tbody>
											
											<% for( Condicion it : condicionesActivas ){ %>
											<tr class="gradeA">
												<td><% out.print("CON" + it.getIdCondicion() ); %></td>
												<td><% out.print(it.getNombre() ); %></td>
												<td><% out.print(it.getDescripcion() ); %></td>
												<td class="center"><button>Editar</button></td>
											</tr>
											<%} %>
											
										</tbody>
									</table>
									<!-- END TABLE -->
								</div>
							</div>
						</div>
					</div> <!-- End of .grid_12 -->
					<div class="clear"></div>
						
					<div class="grid_12">
						<div class="box">
							<div class="block">
								<div class="box">
									<h2>
										Nueva condición 
										<span class="l"></span><span class="r"></span>
									</h2>
									<div class="hide"><span class="s">+</span><span class="h">-</span></div>
									<div class="block">									
											<form class="form_place" id="condicion" style="width=700px" method="post" onsubmit="return sendCondicion();">
												<section class="form_row">
													<div class="grid_2"><label>Nombre:</label></div>
													<div class="grid_10">
														<div class="block_content">
															<input type="text" name="nombre" id="nombre" class="input20pc" required="required" />
														</div>
													</div>
													<div class="clear"></div>
												</section>
											
												<section class="form_row">
													<div class="grid_2"><label>Descripción sobre la condición:</label></div>
													<div class="grid_10">
														<div class="block_content">
															<input type="text" name="descripcion" id="descripcion" class="input50pc" required="required" />
														</div>
													</div>
													<div class="clear"></div>
												</section>
												
												<section class="form_row">
													<div class="grid_2"><label> Tipo de condición:</label></div>
													<div class="grid_10">
														<div class="block_content">
															<input type="radio" name="tipocondicion" id="tc1" class="i-format" value="a"/> Área
															<input type="radio" name="tipocondicion" id="tc2" class="i-format" value="r"/> Ruta
															<input type="radio" name="tipocondicion" id="tc3" class="i-format" value="i"/> Inmovilidad
														</div>
													</div>
													<div class="clear"></div>
												</section>
												
												
												<div id="area">
												
													<section class="form_row">
														<div class="grid_2"><label>Área:</label></div>
														<div class="grid_10">
															<div class="block_content">
																<select id="lstAreas" data-placeholder="Seleccione una ruta" class="chzn-select-deselect" style="width:350px;" tabindex="1">
																	<% for( Area it : areasActivas){ %>
														  				<option value="<% out.print(it.getIdArea()); %>"> <% out.print(it.getNombre()); %> </option> 
													  				<% } %>
																</select>
															</div>
														</div>
														<div class="clear"></div>
													</section>
													
													<section class="form_row">
														<div class="grid_2"><label> Debe estar necesariamente </label></div>
														<div class="grid_10">
															<div class="block_content">
																<input type="radio" name="dentrofuera" id="dentro" class="i-format" value="Dentro" /> Dentro
																<input type="radio" name="dentrofuera" id="fuera" class="i-format"  value="Fuera" /> Fuera
															</div>
														</div>
														<div class="clear"></div>
													</section>
												
													<section class="form_row">
														<div class="grid_2"><label> Incluir rango de fechas y horas</label></div>
														<div class="grid_10">
															<div class="block_content">
																<input type="checkbox" id="fechahoraArea" class="i-format"  /> 
															</div>
														</div>
														<div class="clear"></div>
													</section>
													
													<div id="fechashoras1">
															<section class="form_row">
														<div class="grid_2"><label> Desde </label></div>
														<div class="grid_10">
															<div class="block_content">
																<!-- JSCALENDAR -->
																<input type="text" id="desdeArea" class="input200 datepicker">
															</div>
														</div>
														<div class="clear"></div>
													</section>
													
													
														<section class="form_row">
														<div class="grid_2"><label> Hasta </label></div>
														<div class="grid_10">
															<div class="block_content">
																<!-- JSCALENDAR -->
																<input type="text" id="hastaArea" class="input200 datepicker">
															</div>
														</div>
														<div class="clear"></div>
													</section>
													<section class="form_row">
															<div class="grid_2"><label> Repite </label></div>
															<div class="grid_10">
																<div class="block_content">
																	
																	<select id=repiteArea>
																		<option value="actual"> No </option>
																		<option value="semanal"> Semanal </option>
																		<option value="mensual"> Mensual </option>
																	</select>
																</div>
															</div>
															<div class="clear"></div>
														</section>
														
														
													</div>
												
												</div>
												
												
												<div id="ruta">
												
													<section class="form_row">
														<div class="grid_2"><label>Ruta:</label></div>
														<div class="grid_10">
															<div class="block_content">
																<select id="lstRutas" data-placeholder="Seleccione una ruta" class="chzn-select-deselect" style="width:350px;" tabindex="1">
													  				<% for( Ruta it : rutasActivas){ %>
														  				<option value="<% out.print(it.getIdRuta()); %>"> <% out.print(it.getNombre()); %> </option> 
													  				<% } %>
																</select>
															</div>
														</div>
														<div class="clear"></div>
													</section>

													
													
													<section class="form_row">
														<div class="grid_2"><label> Incluir rango de fechas y horas </label></div>
														<div class="grid_10">
															<div class="block_content">
																<input type="checkbox" id="fechahoraRuta" class="i-format"  /> 
															</div>
														</div>
														<div class="clear"></div>
													</section>
													
													<div id="fechashoras2">
															<section class="form_row">
																<div class="grid_2"><label> Desde </label></div>
																<div class="grid_10">
																	<div class="block_content">
																		<!-- JSCALENDAR -->
																		<input type="text" id="desdeRuta" class="input200 datepicker">
																	</div>
																</div>
																<div class="clear"></div>
															</section>
													
													
														<section class="form_row">
															<div class="grid_2"><label> Hasta </label></div>
															<div class="grid_10">
																<div class="block_content">
																	<!-- JSCALENDAR -->
																	<input type="text" id="hastaRuta" class="input200 datepicker">
																</div>
															</div>
															<div class="clear"></div>
														</section>
														
														<section class="form_row">
															<div class="grid_2"><label> Repite </label></div>
															<div class="grid_10">
																<div class="block_content">
																	
																	<select id=repiteRuta>
																		<option value="actual"> No </option>
																		<option value="semanal"> Semanal </option>
																		<option value="mensual"> Mensual </option>
																	</select>
																</div>
															</div>
															<div class="clear"></div>
														</section>
														
													</div>
												</div>
												
												
												<div id="inmovilidad">
												
													<section class="form_row">
														<div class="grid_2">
															<label> 
																Como 
																<select id="minmax">
																	<option value="maximo"> máximo </option>
																	<option value="minimo"> mínimo </option>
																</select>
																debería estar inmovil 
																	
															 </label>
															</div>
														<div class="grid_10">
															<div class="block_content">
																<input type="text" name="tiempo" id="tiempo" class="input10pc "/> minutos.
															</div>
														</div>
														<div class="clear"></div>
													</section>
													
													<section class="form_row">
														<div class="grid_2"><label> Incluir rango de fechas y horas </label></div>
														<div class="grid_10">
															<div class="block_content">
																<input type="checkbox" id="fechahoraInmovilidad" class="i-format"  /> 
															</div>
														</div>
														<div class="clear"></div>
													</section>
													
													<div id="fechashoras3">
															<section class="form_row">
																<div class="grid_2"><label> Desde </label></div>
																<div class="grid_10">
																	<div class="block_content">
																		<!-- JSCALENDAR -->
																		<input type="text" id="desdeInmovilidad" class="input200 datepicker">
																	</div>
																</div>
																<div class="clear"></div>
															</section>
													
													
														<section class="form_row">
															<div class="grid_2"><label> Hasta </label></div>
															<div class="grid_10">
																<div class="block_content">
																	<!-- JSCALENDAR -->
																	<input type="text" id="hastaInmovilidad" class="input200 datepicker">
																</div>
															</div>
															<div class="clear"></div>
														</section>
														
														<section class="form_row">
															<div class="grid_2"><label> Repite </label></div>
															<div class="grid_10">
																<div class="block_content">
																	
																	<select id=repiteInmovilidad>
																		<option value="actual"> No </option>
																		<option value="semanal"> Semanal </option>
																		<option value="mensual"> Mensual </option>
																	</select>
																</div>
															</div>
															<div class="clear"></div>
														</section>
														
													</div>
												</div>
													
												<section class="form_row">
												<div class="grid_10 alignright">
														<div class="block_content">
															<input class="button blue medium submit alignleft" type="submit" value="Registrar" />
															<input class="button red medium submit alignleft" type="reset" value="Rehacer" />															
														</div>
													</div>
													<div class="clear"></div>
												</section>
											</form>
											
									</div>
								</div>
							</div>
						</div>
					</div><!-- End of grid_12 -->
					<div class="clear"></div>
				</section><!-- end of #page_content -->
			</section><!-- end of #container_12 -->
		</section><!-- end of #container -->
		
	<script src="../js/ui_calls.js" type="text/javascript"></script>
	<script src="../js/scripts.js" type="text/javascript"></script>
	</body>

</html>
